<script setup lang="ts">

import {useAttrs} from "vue";

const attrs = useAttrs()
const props = defineProps({
  modelValue:{

  },
  showType: {
    default: 'select',
  },
  showTag: {
    default: false
  }
})
const emits= defineEmits(['update:modelValue'])
const selected = ref(null)
const handInputChange=()=> {
  emits('update:modelValue',selected.value)
}
const init = ()=> {
  selected.value = -1
  if (props.modelValue) {
    selected.value = props.modelValue
  }
}
watch(()=>props.modelValue,()=> {
  init()
})

init()

const options = ref([
  {
    label: '待审核',
    value: '-1'
  },
  {
    label: '审核通过',
    value: '0',
    type: 'success'
  },
  {
    label: '审核不通过',
    value: '1',
    type: 'danger',
  }
])
const prop = ref({
  emitPath: false
})

</script>

<template>
  <template v-if="showTag != undefined && showTag != false">
    <el-tag v-for="item in options.filter(value => value.value == modelValue)" :type="item.type || ''">{{item.label}}</el-tag>
  </template>
  <el-radio-group v-else-if="showType == 'radio'" v-model="selected" @change="handInputChange">
    <el-radio v-for="item in options" :value="item.value" size="large">{{item.label}}</el-radio>
  </el-radio-group>
  <ElCascader style="width: 100%;"  v-bind="attrs" v-else v-model="selected" @change="handInputChange" :options="options" :props="prop" clearable/>

</template>

<style scoped lang="scss">

</style>
